<template>
  <a-card :bordered="false">
    <div class="ann">
      <div class="an">
        <h3 class="sv">{{  data.title }}</h3>
        <div class="sv-y" v-for="a in data.detail">
          <div class="sv-a" v-if="a.type === 'text' ">{{ a.title }} :
            <div class="sv-z">{{ a.data }}</div>
          </div>
          <div class="sv-a" v-else-if="a.type === 'remark'" >{{ a.title }}:
            <div class="sv-z">{{ a.data }}</div>
          </div>
          <div class="sv-e" v-else-if="a.type === 'radio' ">{{ a.title }}:
            <div class="sv-w" v-for="s in a.detail.items">
             <span v-if="a.replys">
               <input type="radio" :checked="a.replys === s.value" disabled="disabled">{{ s.value }}
             </span>
              <span v-else>
               <input type="radio" disabled="disabled">{{ s.value }}
             </span>
            </div>
          </div>
          <div class="sv-q" v-else-if="a.type === 'checkbox'">{{ a.title }}
            <div class="sv-r" v-for="x in a.detail.items">
             <span v-if="a.replys">
               <input type="checkbox" :checked="a.replys.includes(x.value)" onclick="this.checked=!this.checked">{{ x.value }}
             </span>
              <span v-else>
               <input type="checkbox" onclick="this.checked=!this.checked">{{ x.value }}
             </span>
            </div>
          </div>
          <div class="sv-k" v-else-if="a.type === 'line' "></div>
        </div>
      </div>
    </div>
  </a-card>
</template>
<script>
import { getAction } from '@api/manage'
import DetailList from '@comp/tools/DetailList'
import PageLayout from '@comp/page/PageLayout'
import ABadge from 'ant-design-vue/lib/badge/Badge'
const DetailListItem = DetailList.Item
export default {
  name: "InquiryContent",
  components: {
    PageLayout,
    ABadge,
    DetailList,
    DetailListItem,
  },
 data(){
    return{
      //表单禁用
      props: {
        disabled: {
          default: false
        }
      },
      url: {
        web:"/inquiry/inquiryInfo/queryById",

      },
      data:{},
    }

 },
  created() {
    this.getWeb(this.$route.params.record.id);
  },
  computed: {
  },
  methods:{
    getWeb(id){
      let param = {};
      param.id = id;
      getAction(this.url.web,param).then(res=>{
        let content = res.result.content;
        let  obj = JSON.parse(content);
        this.data = obj;
      })
    },
  }
}
</script>

<style scoped>
.ann{
  width: 100%;
  /*background-color: #f6f6f6;*/
}
.an{
  text-align: initial;
  background-color:  #f6f6f6;;
  width: 95%;
  margin:0% 3%;
}
.sv{
  text-align: center;
  padding-top: 15px;
  display: block ;
  background-color: lightskyblue;
  width:100%;
  height: 60px;
  line-height: 30px;
  font-size: 18px;
}
.sv-y{
  margin: 20px;
}
.sv-a{
  font-weight:bold;

}
.sv-z{
  margin-left: 4rem;
  border: #c7cbcd double 2px;
  padding: 10px;
}
.sv-e{
  font-weight:bold;
  display: flex;
  padding: 5px;
}
.sv-w{
  font-weight:bold;
  padding-left: 26px;
}
input[type='radio']:checked:after {
  width: 15px;
  height: 15px;
  border-radius: 15px;
  top: -2px;
  left: -1px;
  position: relative;
  background-color: #2b4fe3;
  content: '';
  display: inline-block;
  visibility: visible;
  border: 2px solid white;
}
.sv-q{
  display: flex;
  font-weight:bold;
  margin-left: 5px;
}
.sv-r{
  margin-left: 34px;

}
.sv-k{
  border-bottom:1px dashed #828080;
  overflow: auto;
}
</style>